import React from 'react';
import { Layout, Space, Dropdown, Avatar, Button, Typography, Tag } from 'antd';
import {
  UserOutlined,
  LogoutOutlined,
  SettingOutlined,
  BellOutlined,
} from '@ant-design/icons';
import { useAuth, useAppContext } from '../contexts/AppContext';

const { Header: AntHeader } = Layout;
const { Text } = Typography;

const Header: React.FC = () => {
  const { user, logout } = useAuth();
  const { showSuccess } = useAppContext();

  const handleLogout = async () => {
    try {
      await logout();
      showSuccess('已成功退出登录');
    } catch (error) {
      console.error('Logout failed:', error);
    }
  };

  const userMenuItems = [
    {
      key: 'profile',
      icon: <UserOutlined />,
      label: '个人资料',
      onClick: () => {
        // TODO: 打开个人资料页面
      },
    },
    {
      key: 'settings',
      icon: <SettingOutlined />,
      label: '设置',
      onClick: () => {
        // TODO: 打开设置页面
      },
    },
    {
      type: 'divider' as const,
    },
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录',
      onClick: handleLogout,
    },
  ];

  return (
    <AntHeader style={{ 
      background: '#fff', 
      padding: '0 24px',
      borderBottom: '1px solid #f0f0f0',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      height: '64px',
    }}>
      {/* 左侧面包屑区域 */}
      <div style={{ flex: 1 }}>
        <Text strong style={{ fontSize: '16px', color: '#1890ff' }}>
          DCarpai Guider 管理平台
        </Text>
      </div>

      {/* 右侧用户操作区域 */}
      <Space size="middle">
        {/* 通知按钮 */}
        <Button 
          type="text" 
          icon={<BellOutlined />}
          style={{ color: '#666' }}
          onClick={() => {
            // TODO: 打开通知面板
          }}
        />

        {/* 用户信息 */}
        <Space>
          <div style={{ textAlign: 'right', lineHeight: '1.2' }}>
            <div>
              <Text strong>{user?.username}</Text>
              {user?.role === 'admin' && (
                <Tag color="blue" style={{ marginLeft: '8px' }}>
                  管理员
                </Tag>
              )}
            </div>
            <div>
              <Text type="secondary" style={{ fontSize: '12px' }}>
                {user?.email}
              </Text>
            </div>
          </div>
          
          <Dropdown
            menu={{ items: userMenuItems }}
            trigger={['click']}
            placement="bottomRight"
          >
            <Avatar 
              style={{ 
                backgroundColor: '#1890ff', 
                cursor: 'pointer',
                border: '2px solid #f0f0f0',
              }}
              icon={<UserOutlined />}
            />
          </Dropdown>
        </Space>
      </Space>
    </AntHeader>
  );
};

export default Header;
